// 測試距離字段顯示功能
// 模擬崗位數據，包含距離字段

const mockJobData = {
  // 有距離的崗位
  jobWithDistance: {
    id: 'job_001',
    date: '01月20日',
    title: '普工崗位',
    salary: '22元/時',
    location: '東莞高步電子廠 廣東省東莞市',
    distance: 5.2,
    tags: [
      { name: '包住', icon: '🏠' },
      { name: '五險一金', icon: '🛡️' }
    ],
    engagement: '已關注 50+'
  },
  
  // 沒有距離的崗位
  jobWithoutDistance: {
    id: 'job_002',
    date: '01月21日',
    title: '技術員崗位',
    salary: '25元/時',
    location: '深圳華為工廠 廣東省深圳市',
    distance: null,
    tags: [
      { name: '雙休', icon: '📅' },
      { name: '年終獎', icon: '🎁' }
    ],
    engagement: '已關注 100+'
  },
  
  // 距離為0的崗位
  jobWithZeroDistance: {
    id: 'job_003',
    date: '01月22日',
    title: '管理崗位',
    salary: '30元/時',
    location: '惠州TCL工廠 廣東省惠州市',
    distance: 0,
    tags: [
      { name: '可借支', icon: '💳' },
      { name: '空調宿舍', icon: '❄️' }
    ],
    engagement: '已關注 30+'
  },
  
  // 距離為小數的崗位
  jobWithDecimalDistance: {
    id: 'job_004',
    date: '01月23日',
    title: '文員崗位',
    salary: '18元/時',
    location: '廣州富士康 廣東省廣州市',
    distance: 2.8,
    tags: [
      { name: '雙休', icon: '📅' },
      { name: '年終獎', icon: '🎁' }
    ],
    engagement: '已關注 80+'
  }
}

// 測試距離顯示邏輯
function testDistanceDisplay() {
  console.log('=== 測試距離字段顯示 ===')
  
  Object.entries(mockJobData).forEach(([key, job]) => {
    console.log(`\n${key}:`)
    console.log(`  崗位: ${job.title}`)
    console.log(`  地點: ${job.location}`)
    console.log(`  距離: ${job.distance}`)
    
    if (job.distance !== null && job.distance !== undefined) {
      console.log(`  顯示: ${job.distance}km`)
    } else {
      console.log(`  顯示: 不顯示距離`)
    }
  })
}

// 模擬組件渲染邏輯
function simulateComponentRender(job: any) {
  const locationElement = {
    location: job.location,
    distance: job.distance,
    shouldShowDistance: job.distance !== null && job.distance !== undefined,
    displayText: job.distance !== null && job.distance !== undefined ? `${job.distance}km` : '',
    // 模擬 JobCard 組件的模板渲染
    template: `
      <view class="job-location">
        <text>${job.location}</text>
        ${job.distance !== null && job.distance !== undefined ? `<text class="job-distance">${job.distance}km</text>` : ''}
      </view>
    `
  }
  
  return locationElement
}

// 測試組件渲染
function testComponentRender() {
  console.log('\n=== 測試組件渲染 ===')
  
  Object.entries(mockJobData).forEach(([key, job]) => {
    const rendered = simulateComponentRender(job)
    console.log(`\n${key}:`)
    console.log(`  地點: ${rendered.location}`)
    console.log(`  距離: ${rendered.distance}`)
    console.log(`  是否顯示距離: ${rendered.shouldShowDistance}`)
    console.log(`  距離顯示文本: ${rendered.displayText}`)
    console.log(`  渲染模板: ${rendered.template}`)
  })
}

// 測試不同頁面的數據轉換
function testPageDataTransformation() {
  console.log('\n=== 測試不同頁面的數據轉換 ===')
  
  // 模擬 jobs.vue 頁面的數據轉換
  const mockApiResponse = {
    hireRecruitUseId: 'recruit_001',
    hireRecruitUseEntryId: 'entry_001',
    hireName: '普工崗位',
    workPrice: '22元/時',
    customerName: '東莞高步電子廠',
    address: '廣東省東莞市',
    distance: 5.2,
    enterpriseLabel: '包住,五險一金'
  }
  
  const transformedJob = {
    id: mockApiResponse.hireRecruitUseId,
    title: mockApiResponse.hireName || '招聘岗位',
    salary: mockApiResponse.workPrice ? `${mockApiResponse.workPrice}` : '面议',
    location: `${mockApiResponse.customerName} ${mockApiResponse.address}`,
    distance: mockApiResponse.distance, // 新增的距離字段
    tags: mockApiResponse.enterpriseLabel ? mockApiResponse.enterpriseLabel.split(',').map(tag => ({ name: tag.trim() })) : []
  }
  
  console.log('原始API數據:', mockApiResponse)
  console.log('轉換後數據:', transformedJob)
  console.log('距離字段:', transformedJob.distance)
  console.log('是否顯示距離:', transformedJob.distance !== null && transformedJob.distance !== undefined)
}

// 測試樣式計算
function testStyleCalculation() {
  console.log('\n=== 測試樣式計算 ===')
  
  const styles = {
    '.job-location': {
      'display': 'flex',
      'justify-content': 'space-between',
      'align-items': 'center',
      'font-size': '26rpx',
      'color': '#999999',
      'margin-bottom': '20rpx'
    },
    '.job-distance': {
      'font-size': '24rpx',
      'color': 'var(--u-primary)',
      'font-weight': '500',
      'background-color': 'var(--u-primary-light)',
      'padding': '4rpx 12rpx',
      'border-radius': '12rpx'
    }
  }
  
  console.log('地理位置樣式:', styles['.job-location'])
  console.log('距離樣式:', styles['.job-distance'])
}

// 執行測試
console.log('開始測試距離字段顯示功能...')
testDistanceDisplay()
testComponentRender()
testPageDataTransformation()
testStyleCalculation()

console.log('\n=== 測試完成 ===')

// 導出測試數據供其他文件使用
export { mockJobData, testDistanceDisplay, testComponentRender, testPageDataTransformation, testStyleCalculation }
